<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>添加书籍</title>
    <!-- 集成Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 集成Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind自定义主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36D399',
                        neutral: '#F9FAFB',
                        error: '#F87272',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .form-input-focus {
                @apply focus:ring-2 focus:ring-primary/50 focus:border-primary;
            }
            .btn-primary {
                @apply bg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-lg transition-all;
            }
            .btn-secondary {
                @apply bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-6 rounded-lg transition-all;
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen font-inter">
<!-- 页面容器 -->
<div class="container mx-auto px-4 py-8 max-w-3xl">
    <!-- 主卡片 -->
    <div class="bg-white rounded-xl shadow-lg p-6 md:p-8 mb-6">
        <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
            <i class="fa fa-book text-primary mr-2"></i> 添加书籍
        </h2>

        <!-- 书籍表单 -->
        <form id="app" class="space-y-6">
            <!-- 表单字段网格布局 -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="form-group">
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">书名：</label>
                    <input type="text" id="name" v-model="book.name" name="name"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus transition-all"
                           placeholder="请输入书名">
                    <p v-if="errors.name" class="mt-1 text-error text-sm">{{ errors.name }}</p>
                </div>

                <div class="form-group">
                    <label for="author" class="block text-sm font-medium text-gray-700 mb-1">作者：</label>
                    <input type="text" id="author" v-model="book.author" name="author"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus transition-all"
                           placeholder="请输入作者">
                    <p v-if="errors.author" class="mt-1 text-error text-sm">{{ errors.author }}</p>
                </div>

                <div class="form-group">
                    <label for="date" class="block text-sm font-medium text-gray-700 mb-1">出版日期：</label>
                    <input type="date" id="date" v-model="book.date" name="date"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus transition-all">
                    <p v-if="errors.date" class="mt-1 text-error text-sm">{{ errors.date }}</p>
                </div>

                <div class="form-group">
                    <label for="press" class="block text-sm font-medium text-gray-700 mb-1">出版社：</label>
                    <input type="text" id="press" v-model="book.press" name="press"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus transition-all"
                           placeholder="请输入出版社">
                    <p v-if="errors.press" class="mt-1 text-error text-sm">{{ errors.press }}</p>
                </div>

                <div class="form-group">
                    <label for="price" class="block text-sm font-medium text-gray-700 mb-1">价格：</label>
                    <input type="number" id="price" v-model.number="book.price" name="price" min="0" step="0.01"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus transition-all"
                           placeholder="请输入价格">
                    <p v-if="errors.price" class="mt-1 text-error text-sm">{{ errors.price }}</p>
                </div>

                <div class="form-group">
                    <label for="statu" class="block text-sm font-medium text-gray-700 mb-1">状态：</label>
                    <select id="statu" v-model="book.statu" name="statu"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input-focus transition-all">
                        <option value="">请选择状态</option>
                        <option value="可借阅">可借阅</option>
                        <option value="已借出">已借出</option>
                        <option value="已下架">已下架</option>
                    </select>
                    <p v-if="errors.statu" class="mt-1 text-error text-sm">{{ errors.statu }}</p>
                </div>
            </div>

            <!-- 按钮组 -->
            <div class="flex flex-wrap gap-4 pt-2">
                <button type="button" @click="submitForm"
                        class="btn-primary flex items-center justify-center">
                        <span v-if="loading" class="mr-2">
                            <i class="fa fa-spinner fa-spin"></i>
                        </span>
                    <i class="fa fa-plus-circle mr-2"></i> 添加
                </button>
                <button type="reset"
                        class="btn-secondary flex items-center justify-center">
                    <i class="fa fa-refresh mr-2"></i> 重置
                </button>
            </div>
            <div v-if="globalError" class="bg-red-50 border border-red-200 text-red-700 p-4 rounded-lg">
                <div class="flex items-start">
                    <div class="flex-shrink-0">
                        <i class="fa fa-exclamation-circle text-red-500"></i>
                    </div>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium">操作失败</h3>
                        <div class="mt-2 text-sm">
                            <p>{{ globalError }}</p>
                        </div>
                    </div>
                </div>
            </div>


        </form>
    </div>

    <!-- 全局错误提示 -->

</div>

<!-- 引入外部资源 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script>
    // 表单验证逻辑
    function validateForm(book) {
        const errors = {};
        let isValid = true;

        if (!book.name) {
            errors.name = '请输入书名';
            isValid = false;
        }

      /*  if (!book.author) {
            errors.author = '请输入作者';
            isValid = false;
        }

        if (!book.date) {
            errors.date = '请选择出版日期';
            isValid = false;
        }

        if (!book.press) {
            errors.press = '请输入出版社';
            isValid = false;
        }

        if (book.price === '' || book.price <= 0) {
            errors.price = '请输入有效的价格';
            isValid = false;
        }*/

        if (!book.statu) {
            errors.statu = '请选择书籍状态';
            isValid = false;
        }

        return { isValid, errors };
    }

    // 创建Vue应用
    const app = Vue.createApp({
        data() {
            return {
                book: {
                    name: '',
                    author: '',
                    date: '',
                    press: '',
                    price: '',
                    statu: ''
                },
                loading: false,
                errors: {},
                globalError: ''
            }
        },
        methods: {
            // 提交表单处理函数
            submitForm() {
                // 重置错误状态
                this.errors = {};
                this.globalError = '';

                // 表单验证
                const validation = validateForm(this.book);
                if (!validation.isValid) {
                    this.errors = validation.errors;
                    return;
                }

                // 设置加载状态
                this.loading = true;

                // 发送数据到后端
                axios({
                    method: 'post',
                    url: '/dem1/book',
                    data: this.book
                }).then(response => {
                    const result = response.data;
                    console.log("后端响应：", result);

                    if (result.success) {
                        alert("添加成功");
                        location.href = "/dem1/test/bookList.html";
                    } else {
                        this.globalError = result.message || "添加失败，请重试";
                    }
                }).catch(error => {
                    console.error("添加请求失败：", error);
                    this.globalError = "网络异常，请检查网络连接";
                }).finally(() => {
                    // 无论成功或失败，都重置加载状态
                    this.loading = false;
                });
            }
        }
    });

    // 挂载应用
    app.mount("#app");
</script>
</body>
</html>